<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王文豪
 * @Date: 2023-09-14 09:57:51
 * @LastEditors: 王文豪
 * @LastEditTime: 2024-08-05 14:31:25
-->

<template>
    <div class="myPage">
      <div class="firstLine">
        <div class="progress">
          <el-progress class="elProgress" type="circle" :percentage="65" :width="120" :stroke-width="14" stroke-linecap="square" :color="progressColor" :define-back-color="backgroundColor" :show-text="false"></el-progress>
          <div class="centerPic">
            <img src="@/assets/images/safeGuard.png" alt="" width="70px">
          </div>
        </div>
        <div class="description">
          <div class="tips rank">安全等级：{{ securityRank }}</div>
          <div class="tips">{{ rankTip }}</div>
        </div>
      </div>
      <div class="secondLine">
        <div class="securityItem">
          <div class="triangle">
            <img src="@/assets/icons/svg/isOk.svg" alt="" width="25px">
          </div>
          <div class="pic">
            <img src="@/assets/icons/svg/phoneNo.svg" alt="" width="70px">
          </div>
          <div class="name">手机号</div>
          <div class="value">{{ security.phone }}</div>
          <div class="actBtn" @click="changePhoneNo">修改手机号</div>
        </div>
        <div class="securityItem">
          <div class="triangle">
            <img src="@/assets/icons/svg/isOk.svg" alt="" width="25px">
          </div>
          <div class="pic">
            <img src="@/assets/icons/svg/password.svg" alt="" width="70px">
          </div>
          <div class="name">登录密码</div>
          <div class="value">定期更改密码有助于账号安全</div>
          <div class="actBtn" @click="changePassword">修改登录密码</div>
        </div>
        <div class="securityItem">
          <div class="triangle">
            <img src="@/assets/icons/svg/isOk.svg" alt="" width="25px">
          </div>
          <div class="pic">
            <img src="@/assets/icons/svg/mailbox.svg" alt="" width="70px">
          </div>
          <div class="name">邮箱</div>
          <div class="value">绑定邮箱有助于帮助您的账号易用</div>
          <div class="actBtn" @click="changeEmail">绑定邮箱</div>
        </div>
        <!-- <div class="securityItem noMargin">
          <div class="triangle">
            <img src="@/assets/images/isOk.svg" alt="" width="25px">
          </div>
          <div class="pic">
            <img src="@/assets/images/realName.svg" alt="" width="70px">
          </div>
          <div class="name">实名认证</div>
          <div class="value">{{ security.name + ' ' + security.certNo }}</div>
          <div class="actBtn">查看实名信息</div>
        </div> -->
      </div>


      <el-dialog title="修改手机号" :visible.sync="phoneShow" width="500px">
        <el-form :model="editForm" ref="editForm"  :rules="rules">
          <el-form-item label="手机号" label-width="80px" prop="phone">
            <el-input v-model="editForm.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="phoneShow = false">取 消</el-button>
          <el-button type="primary" @click="setPhoneNo" :loading="loading">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog title="修改邮箱" :visible.sync="emailShow" width="500px">
        <el-form :model="editForm" ref="editForm"  :rules="rules">
          <el-form-item label="邮箱" label-width="80px" prop="email">
            <el-input v-model="editForm.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="emailShow = false">取 消</el-button>
          <el-button type="primary" @click="setEmail" :loading="loading1">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog title="修改密码" :visible.sync="passwordShow" width="500px">
        <el-form :model="editForm" ref="editForm"  :rules="rules">
          <el-form-item label="原密码" label-width="100px" prop="oldPassword">
            <el-input v-model="editForm.oldPassword" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" label-width="100px" prop="newPassword">
            <el-input v-model="editForm.newPassword" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="请重复密码" label-width="100px" prop="verifyPassword">
            <el-input v-model="editForm.verifyPassword" autocomplete="off" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="passwordShow = false">取 消</el-button>
          <el-button type="primary" @click="setPassword" :loading="loading2">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
import JSEncrypt from 'jsencrypt'
  export default {
    name: "safetyGuard",
    components:{
      
    },
    data() {
      return {
        progressColor:'#409EFF',//进度条颜色
        backgroundColor:'#ebeef5',//进度条底色
        securityRank:'一般',//安全等级
        rankTip:'您与安全达人仅一步之遥',
        security:{
          phone:'',
          name:'张*',
          certNo:'3213**********1624'
        },
        phoneShow:false,
        emailShow:false,
        passwordShow:false,
        loading:false,
        loading1:false,
        loading2:false,
        editForm:{
          phone:'',
          email:'',
          oldPassword:'',
          newPassword:'',
          verifyPassword:'',
        },
        rules:{
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' }
          ],
          oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
          ],
          verifyPassword: [
            { required: true, message: '请重复密码', trigger: 'blur' }
          ],
        }
      };
    },
    mounted() {
      this.phoneNoForShow()
    },
    destroyed() {
      
    },
    
    computed: {
      tableHeight() {
        return window.innerHeight - 370;
      },
    },
    methods:{
      /**
       * @Descripttion: 设置手机号
       * @Author: 王文豪
       * @msg: 
       * @return {*}
       */      
      changePhoneNo(){
        this.editForm = {
          phone:'',
          email:'',
          oldPassword:'',
          newPassword:'',
          verifyPassword:'',
        }
        this.phoneShow = true
      },
      phoneNoForShow(){
        let phoneTemp = JSON.parse(localStorage.getItem('userInfo')).phone || ''
        let aaa = phoneTemp.split('')
        let bbb = []
        if(aaa.length){
          aaa.forEach((item,index) =>{
            if(index >= 3 && index <= 6){
              bbb.push('*')
            }else{
              bbb.push(item)
            }
          })
        }
        this.security.phone = bbb.join('')
      },
      setPhoneNo(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let params = {
              phone:this.editForm.phone
            }
            this.loading = true
            this.$api
            .editPhone(params)
            .then((res) => {
              this.loading = false
              this.phoneShow = false
              console.log("res=========", res);
              this.$message.success('修改成功！')
              this.$api.getUser({}).then((res) => {
                this.$store.dispatch("setUserInfo", res.data);
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                this.phoneNoForShow()
              });
            })
            .catch((e) => {
              console.log(e)
              this.loading = false
            });
          }else{
            return false
          }
        })
      },
      /**
       * @Descripttion: 设置邮箱
       * @Author: 王文豪
       * @msg: 
       * @return {*}
       */      
      changeEmail(){
        this.editForm = {
          phone:'',
          email:'',
          oldPassword:'',
          newPassword:'',
          verifyPassword:'',
        }
        this.emailShow = true
      },
      setEmail(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let params = {
              email:this.editForm.email
            }
            this.loading1 = true
            this.$api
            .editemail(params)
            .then((res) => {
              this.loading1 = false
              this.emailShow = false
              console.log("res=========", res);
              this.$message.success('修改成功！')
            })
            .catch((e) => {
              console.log(e)
              this.loading1 = false
            });
          }else{
            return false
          }
        })
      },
      /**
       * @Descripttion: 设置密码
       * @Author: 王文豪
       * @msg: 
       * @return {*}
       */      
       changePassword(){
        this.editForm = {
          phone:'',
          email:'',
          oldPassword:'',
          newPassword:'',
          verifyPassword:'',
        }
        this.passwordShow = true
      },
      setPassword(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            if(this.editForm.newPassword != this.editForm.verifyPassword){
              this.$message.warning('两次输入的新密码不一致！')
              return
            }
            let jse1 = new JSEncrypt();
            let jse2 = new JSEncrypt();
            let password = jse2.encrypt(this.editForm.newPassword)
            let params = {
              oldPassword:jse1.encrypt(this.editForm.oldPassword),
              newPassword:password,
              verifyPassword:password,
            }
            this.loading2 = true
            this.$api
            .editpassword(params)
            .then((res) => {
              this.loading2 = false
              this.passwordShow = false
              console.log("res=========", res);
              this.$message.success('修改成功！')
            })
            .catch((e) => {
              console.log(e)
              this.loading2 = false
            });
          }else{
            return false
          }
        })
      },
    },
  }
  </script>
  
  <style scoped lang="scss">
  .myPage{
    // background: grey;
    // padding: 10px 20px 20px 20px;
    border-radius: 6px;
    height: 660px;
    overflow: auto;
    .firstLine{
      background: #fff;
      height: 160px;
      margin-top: 10px;
      display: flex;
      .progress{
        width: 120px;
        height: 120px;
        // background: #ef4125;
        margin: 20px;
        margin-left: 30px;
        position: relative;
        .elProgress{
          margin: auto;
          transform: rotate(180deg);
        }
        .centerPic{
          width: 70px;
          height: 70px;
          background: orange;
          position: absolute;
          top: 25px;
          left: 25px;
          border-radius: 10px;
          overflow: hidden;
        }
      }
      .description{
        height: 120px;
        width: calc(100% - 80px);
        // background: #ef4125;
        margin: 20px;
        padding: 20px 0;
        .tips{
          height: 40px;
          line-height: 40px;
          font-size: medium;
        }
        .rank{
          font-size: larger;
          font-weight: bold;
        }
      }
    }
    .secondLine{
      // background: #fff;
      height: 300px;
      margin-top: 20px;
      display: flex;
      .securityItem{
        width: calc(25% - 15px);
        height: 100%;
        background: #fff;
        margin-right: 20px;
        text-align: center;
        position: relative;
        .triangle{
          position: absolute;
          top: 0;
          right: 0;
          height: 50px;
          width: 50px;
          background-color: #6fd25d;
          clip-path: polygon(0 0, 100% 100%,100% 0);
          img{
            position: absolute;
            right: 3px;
            top: 3px;
          }
        }
        .pic{
          height: 70px;
          // background: orange;
          width: 100px;
          margin: auto;
          margin-top: 15px;
        }
        .name{
          height: 60px;
          line-height: 60px;
          font-size: medium;
          // background: orchid;
        }
        .value{
          height: 50px;
          line-height: 40px;
          font-size: small;
          color: #8e8e8e;
          margin-top: -20px;
          // background: khaki;
        }
        .actBtn{
          height: 60px;
          line-height: 60px;
          width: 80%;
          font-size: medium;
          margin: auto;
          border: 1px solid #8e8e8e;
        }
        .actBtn:hover{
          background: rgba(241, 241, 253, 0.767);
          font-size: medium;
        }
      }
      .noMargin{
        margin: 0;
      }
    }
  }
  </style>
  